<template>
	<!-- 收货地址组件 -->
	<view class="address_container">
		<view class="address_info">
			<button class="choseAddressBtn" 
			type="default" 
			v-if="!choseAddressFlag"
			@click="choseAddressHandle"
			>选择收货地址</button>
			<view class="address_info_show" v-if="choseAddressFlag" @click="choseAddressHandle">
				<view class="address_info_icon">
					<image class="address_info_icon_img" src="../../static/goodsDtail/addressIcon.png" mode="widthFix"></image>
				</view>
				<view class="address_info_detail">
					<view class="address_info_detail_text">
						{{ addressInfo.detailInfo }}
					</view>
					<view class="address_info_user">
						<view class="address_info_user_name">
							{{ addressInfo.userName }}
						</view>
						<view class="address_info_user_number">
							{{ addressInfo.telNumber }}
						</view>
					</view>
				</view>
				<!-- right标志icon -->
				<view class="address_right_icon">
					<image class="address_right_icon_img" src="../../static/goodsDtail/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";

const props = defineProps({
  noticeChoseAddress: {
    type: Function,
    required: true,
  },
});

// 是否选择了地址标识
let choseAddressFlag = ref(false);
// 地址信息
let addressInfo = ref();

onMounted(()=>{
	// 页面加载获取Storage中的地址
	getDefaultAddress();
})

function getDefaultAddress(){
	if(uni.getStorageSync("address") == ""){
		return 1;
	}
	addressInfo.value = JSON.parse(uni.getStorageSync("address"));
	choseAddressFlag.value = true;
	props.noticeChoseAddress(true);
}


// 选择收货地址处理器
function choseAddressHandle(){
	uni.chooseAddress({
		success(res) {
			choseAddressFlag.value = true;
			addressInfo.value = res;
			
			// 通知父类
			props.noticeChoseAddress(true);
			
			// 本地存储
			uni.setStorageSync("address", JSON.stringify(addressInfo.value));
		},
		fail(err){
			choseAddressFlag.value = false;
			props.noticeChoseAddress(false);
			console.log(err); 
		}
	})
}

</script>

<style lang="scss" scoped>

.address_info{
	background-color: #fff;
	padding: 25rpx 10rpx 15rpx 10rpx; 
	// border: solid #71ea3c 1px;
}

.choseAddressBtn{
	width: 35%;
	background-color: #1fc15a;
	color: white;
}

.address_info_icon_img{
	width: 50rpx;
	padding: 0px 15rpx;
}

.address_info_show{
	display: flex;
	// justify-content: center;
	align-items: center;
	// border-bottom: solid #dedede 1px;
	padding-bottom: 20rpx;
	position: relative;
}

.address_info_detail_text{
	font-weight: 600;
}

.address_info_detail{
	margin-left: 10rpx;
}

.address_info_user{
	display: flex;
	font-size: 13px;
	margin-top: 10rpx;
	color: #343434;
}

.address_info_user_number{
	margin-left: 15rpx;
	font-size: 13px;
	display: flex;
	align-items: center;
	color: #545454;
}

.address_right_icon{
	position: absolute;
    right: 15rpx;
    top: 8rpx;
}

.address_right_icon_img{
	width: 60rpx;
}
</style>